<template>
	<view class="container">
		<view class="top">
			<view class="title" v-show="!showCopy">
				{{$t('language.pageTitle')}}
			</view>
			<view class="title" v-show="showCopy">
				{{$t('language.pageDesc')}}
				<text class="title-desc">{{$t('language.pageDesc2')}}</text>
			</view>
			<view class="search-container">
				<view class="search-left-container">
					<image class="search-image" src="../../static/icon_search.png"></image>
					<input class="uni-input search-text" v-model="orderCode" focus :placeholder="$t('language.placehold')" />
				</view>
				<view class="search-button" @click="search">{{$t('language.search')}}</view>
			</view>
		</view>
		<view class="charge-container">
			<view class="charge-type-container">
				<view class="charge-title">{{$t('language.text1')}}</view>
				<view class="charge-type-value">|</view>
				<view class="charge-type-value">{{$t('language.text2')}}</view>
			</view>
			<view class="item-container" style="margin-top: 48rpx;" @click="buy(item)" v-for="(item,index) in goodList" :key="index">
				<view class="item-left-container">
					<image class="item-left-image" :src="$imgUrl+item.goods_img"></image>
					<view class="item-left-title">{{item.goods_name}}</view>
				</view>
				<image class="item-right-more" src="../../static/icon_right_more.png"></image>
			</view>
			<view class="contact">
				<text @click="contact">{{$t('language.kefu')}}</text>
				<text class="charge-type-value">|</text>
				<text class="text-zh-en" @click="changeLan">{{$t('language.text')}}</text>
			</view>
			<view class="contact">
				<text @click="jumpWeb('https://beian.miit.gov.cn')">{{$t('language.beian')}}</text>
			</view>
		</view>
		
		<view class="mask" v-if="showCopy" @click="dismissCopy">
			<view class="copy-container">
				<view class="copy-top" v-if="carmyList.length>0">
					<view v-for="(item,i) in carmyList" :key="i" class="copy-top-item">
						<view class="copy-title">{{item.carmy}}</view>
						<view @click.stop="copySuccess(item.carmy)" class="copy-title-text">{{$t('language.fuzhi')}}</view>
					</view>
				</view>
				<view class="copy-top" v-else>
					<view>{{$t('language.wujilu')}}</view>
				</view>
				<view class="copy-divider"></view>
				<view class="copy-bottom">
					<view class="copy-bottom-text">{{$t('language.wozhidao')}}</view>
				</view>
			</view>
		</view>
		<view class="mask" v-if="showContact" @click="dismissContact">
			<view class="contact-container">
				<view class="contact-top-container">
					<view class="contact-top-container1">
						<view class="contact-title">{{$t('language.ruxubangzhu')}}</view>
						<view class="contact-tips">{{$t('language.zaixianshijian')}}：{{kefuInfo.time}}</view>
					</view>
					<view class="urgency">{{$t('language.bodadianhua')}}：{{kefuInfo.tel}}</view>
				</view>
				<view class="contact-item-container" style="margin-top: 12rpx;">
					<image class="contact-image" src="../../static/icon_qq.png"></image>
					<view class="contact-right-container">
						<view class="contact-item-title">{{$t('language.lianxi')}}QQ</view>
						<view class="contact-item-value">{{kefuInfo.qq_qq}}</view>
					</view>
				</view>
				<view class="contact-item-container">
					<image class="contact-image" src="../../static/icon_qq_group.png"></image>
					<view class="contact-right-container">
						<view class="contact-item-title">{{$t('language.tianj')}}</view>
						<view class="contact-item-value">{{kefuInfo.qq_qu}}</view>
					</view>
				</view>
				<view class="contact-item-container">
					<image class="contact-image" src="../../static/icon_tel_phone.png"></image>
					<view class="contact-right-container">
						<view class="contact-item-title">{{$t('language.dianhualianxi')}}</view>
						<view class="contact-item-value">{{kefuInfo.tel}}</view>
					</view>
				</view>
				<view class="contact-button">{{$t('language.wozhidao')}}</view>
			</view>
		</view>
	    <view class="mask" @click="pickerlan" v-show="lanShow">
			<view class="picker-view">
				<view class="x-picker-view" :class="chooselan===i?'picker-view-sel':''" v-for="(item,i) in pickerlanarr" :key="i" @click.stop="pickerlan(i)" >
					{{item}}
				</view>
				<view class="btn-cancel">
					{{$t('language.quxiao')}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		async onLoad(){
			console.log(this.$t('language.text'),this.$i18n.locale)
			this.querykfInfo()
			this.getgoodsList()
		},
		methods: {
			search() {
				this.$http.post('order.getCarmy', 
				{order_code:this.orderCode,
				lang:window.sessionStorage.getItem('lang') || 'cn'
				}).then(res => {
					this.carmyList=res.data.cary
					this.showCopy = true
				}).catch(e => {
				})
			},
			querykfInfo() {
				this.$http.post('order.info',{
					lang:window.sessionStorage.getItem('lang') || 'cn'
				}).then(res => {
					this.kefuInfo=res.data
				}).catch(e => {
				})
			},
			getgoodsList(){
				this.$http.post('order.goodsList',{
					lang:window.sessionStorage.getItem('lang') || 'cn'
				}).then(res => {
					this.goodList=res.data
				}).catch(e => {
				})
			},
			dismissCopy() {
				this.showCopy = false
			},
			contact() {
				this.showContact = true
			},
			jumpWeb(url){
				uni.navigateTo({
					url: '/pages/webview/webview?url='+url
				})
			},
			changeLan(){
				this.lanShow=true
			},
			pickerlan(i){
				if(i>=0){
				  this.chooselan=i
				}
				var lan=i>0?'en':'cn'
				this.$i18n.locale = lan //this.$i18n的local进行语言切换
				window.sessionStorage.setItem('lang', lan)
				this.lanShow=false
				setTimeout(()=>{
					this.querykfInfo()
					this.getgoodsList()
				})
				
			},
			dismissContact() {
				this.showContact = false
			},
			buy(data) {
				uni.navigateTo({
					url: '/pages/buy/buy?goodObj='+JSON.stringify(data)
				})
			},
			copySuccess(context){
				this.showCopy = false
				// 创建输入框元素
				let oInput = document.createElement('input');
				// 将想要复制的值
				oInput.value = context;
				// 页面底部追加输入框
				document.body.appendChild(oInput);
				// 选中输入框
				oInput.select();
				// 执行浏览器复制命令
				document.execCommand('Copy');
				// 弹出复制成功信息
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
				this.orderCode=''
				// 复制后移除输入框
				oInput.remove();
			}
		},
		data() {
			return {
				goodList:[],
				orderCode:'',//订单号
				carmyList:[],
				showCopy:false,
				showContact:false,
				imageURL:'https://newydxs.oss-cn-beijing.aliyuncs.com/bg_top_shopping.png',
				kefuInfo:{},
				pickerlanarr:['简体中文','English'],
				lanShow:false,
				chooselan:0
			}
		}
	}
</script>

<style>
	.container {
		flex-direction: column;
		display: flex;
	}
	.top {
		width: 750rpx;
		height: 408rpx;
		background-image: url('https://newydxs.oss-cn-beijing.aliyuncs.com/bg_top_shopping.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.title {
		font-size: 60rpx;
		margin-top: 60rpx;
		margin-left: 48rpx;
		color: #FFFFFF;
	}
	.title-desc{
		display: flex;
		font-size: 32rpx;
		line-height: 40rpx;
		margin-bottom: -20rpx;
	}
	.search-container {
		width: 690rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 45rpx;
		margin-top: 48rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.search-left-container {
		display: flex;
		flex:1;
		align-items: center;
	}
	.search-image {
		width: 28rpx;
		height: 28rpx;
		margin-left: 34rpx;
	}
	.search-text {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-left: 12rpx;
		width: 100%;
	}
	.search-button {
		width: 168rpx;
		height: 78rpx;
		background: rgb(65,133,255,0.2);
		border-radius: 39rpx;
		margin-right: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #4185FF;
	}
	.charge-container {
		width: 750rpx;
		height: 900rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.0500);
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		margin-top: -90rpx;
	}
	.charge-type-container {
		display: flex;
		flex-direction: row;
		margin-top: 48rpx;
		margin-left: 72rpx;
		align-items: center;
	}
	.charge-title {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.charge-type-value {
		font-size: 24rpx;
		color: #999999;
		margin-left: 10rpx;
	}
	.item-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top:  30rpx;
		width: 610rpx;
		height: 160rpx;
		background: #F8F8F8;
		border-radius: 8rpx;
		border: 1rpx solid #E7E7E7;
		margin-left: 72rpx;
	}
	.item-left-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 40rpx;
	}
	.item-left-image {
		width: 88rpx;
		height: 88rpx;
	}
	.item-left-title {
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: 30rpx;
	}
	.item-right-more {
		width: 20rpx;
		height: 36rpx;
		margin-right: 34rpx;
	}
	.contact {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-top: 48rpx;
		width: 750rpx;
		text-align: center;
	}
	.text-zh-en{
		color: #4185FF;
		margin-left: 10rpx;
	}
	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.copy-container {
		width: 640rpx;
		/* height: 400rpx; */
		background: #FFFFFF;
		border-radius: 24rpx;
	}
	.copy-top {
		display: flex;
		width: 640rpx;
		height: 228rpx;
		margin: 40rpx 0;
		overflow: scroll;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.copy-title {
		font-size: 40rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #353535;
		width: 300rpx;
	}
	.align-center{text-align: center;}
	.copy-top-item{
		display: flex;
		justify-content:space-between;
		line-height: 60rpx;
	}
	.copy-title-text{
		font-size: 36rpx;
		color: #4185FF;
		position: relative;
		padding-left:30rpx;
	}
	.copy-title-text::before{
		width: 4rpx;
		height: 40rpx;
		background: #CCCCCC;
		content: '';
		position: absolute;
		top: 10rpx;
		left: 0;
	}
	.copy-divider {
		width: 640rpx;
		height: 2rpx;
		background: #E5E5E5;
	}
	.copy-bottom {
		width: 640rpx;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.copy-bottom-text {
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #4185FF;
	}
	.contact-container {
		width: 542rpx;
		/* height: 746rpx; */
		background: #FFFFFF;
		border-radius: 32rpx;
		display: flex;
		flex-direction: column;
	}
	.contact-top-container {
		width: 542rpx;
		height: 246rpx;
		background-image: url('https://newydxs.oss-cn-beijing.aliyuncs.com/icon_contact_top.png');
		background-repeat: no-repeat;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	.contact-top-container1 {
		display: flex;
		margin-top: 48rpx;
		flex-direction: column;
		align-items: center;
	}
	.contact-title {
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		text-align: center;
		padding: 0 10rpx;
	}
	.contact-tips {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 6rpx;
	}
	.urgency {
		width: 450rpx;
		height: 48rpx;
		background: rgb(65,133,255,0.2);
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 28rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4185FF;
	}
	.contact-item-container {
		width: 382rpx;
		margin-left: 80rpx;
		margin-top: 48rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.contact-image {
		width: 72rpx;
		height: 72rpx;
	}
	.contact-right-container {
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;
		flex: 1;
	}
	.contact-item-title {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.contact-item-value {
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.contact-button {
		width: 462rpx;
		height: 80rpx;
		background: linear-gradient(270deg, #4185FF 0%, #73B1FF 100%);
		border-radius: 40rpx;
		margin-left: 40rpx;
		margin-top: 48rpx;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
	/* 中英文切换 */
	.picker-view{
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	.x-picker-view{
		line-height: 100rpx;
		border-bottom: 1px solid #dddddd;
		color: #333333;
		text-align: center;
		font-size: 32rpx;
	}
	.picker-view-sel{
		color: #4185FF;
	}
	.btn-cancel{
		line-height: 100rpx;
		border-top: 20rpx solid #eeeeee;
		color: #333333;
		text-align: center;
		font-size: 32rpx;
	}
</style>